
import React, { useState } from 'react'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import homeSlider from '../../assets/img//home-1.png'
import homeCoinBtc from '../../assets/img/coin/btc.png'
import homeCoinEth from '../../assets/img/coin/eth.png'
import homeCoinIpfs from '../../assets/img/coin/ipfs.png'
import homeArrowRight from '../../assets/img/white-arrow-right.png'
import './index.scss';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { NotificationOutlined } from '@ant-design/icons';
import { Layout, Row, Col } from 'antd'
import Slider from "react-slick"
const { Content } = Layout

function Home(props) {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    const [imgList, setImgList] = useState([
        { url: homeSlider, desc: '我們让每一個人都可以挖掘工具加密货币。您可以使用行业内领先公司的最新及最先进的技术。' },
        { url: homeSlider, desc: '我們让每一個人都可以挖掘工具加密货币。您可以使用行业内领先公司的最新及最先进的技术。' }
    ])

    const [coinLIndex, setCoinIndex] = useState(0)
    const [coinList, setCoinList] = useState([
        { name: 'BTC', icon: homeCoinBtc },
        { name: 'ETH', icon: homeCoinEth },
        { name: 'IPFS', icon: homeCoinIpfs }
    ])

    const [specialList, setSpecialList] = useState([
        { title: '特色一', desc: '特点简介' },
        { title: '特色二', desc: '特点简介' },
        { title: '特色三', desc: '特点简介' },
        { title: '特色四', desc: '特点简介' }
    ])

    const seletIndex = e => {
        setCoinIndex(e)
    }

    const slideItem = (value, index) => {
        return (
            <div className="slide-item" key={index}>
                <img src={value.url} alt="homeSlider" />
                <div className="slider-tip">
                    <NotificationOutlined />
                    <span>{value.desc}</span>
                </div>
            </div>
        )
    }

    const coinItem = (value, index) => {
        return (
            <Col className={index === coinLIndex ? "home-coin-itemActive" : "home-coin-item"}
                key={index} span={7}
                onClick={() => seletIndex(index)}>
                <div>
                    <img className="coin-icon" src={value.icon} alt="coin" />
                    <span>{value.name}</span>
                </div>
                <div>
                    {index === coinLIndex && <img className="coin-ative" src={homeArrowRight} alt="coin" />}
                </div>
            </Col>
        )
    }

    const specialItem = (value, index) => {
        return (
            <Col className="home-special-item" key={index} span={5}>
                <h3>{value.title}</h3>
                <p>{value.desc}</p>
            </Col>
        )
    }

    return (
        <Layout className="layout home">
            <HeaderBox />
            <Content>
                <div className="home-slider">
                    <Slider {...settings}>
                        {
                            imgList.map((value, index) => {
                                return slideItem(value, index)
                            })
                        }

                    </Slider>
                </div>
                <div className="home-title">
                    <p className="home-title-en">Access to digital currency</p>
                    <p className="home-title-cn">短时间、低成本获取数字货币</p>
                </div>
                <Row className="home-coin main" justify="space-between">
                    {
                        coinList.map((value, index) => {
                            return coinItem(value, index)
                        })
                    }
                </Row>
                <div className="home-platform">
                    <div className="main">
                        <h3>xx平台</h3>
                        <p>简介宣传语xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                        <Row justify="space-between">
                            {
                                specialList.map((value, index) => {
                                    return specialItem(value, index)
                                })
                            }
                        </Row>
                    </div>
                </div>

                <div className="home-title" id="partner">
                    <p className="home-title-en">cooperative partner</p>
                    <p className="home-title-cn">合作伙伴</p>
                </div>
            </Content>
            <FooterBox />
        </Layout >
    )
}

export default Home